<template>
    <div class="container">
        <HeaderBar />
        <div class="container_main" style="padding-bottom: 100px">
            <div class="order_view">
                <div class="order_step">
                    <div class="order_step_item">
                        <div class="order_step_item_status">已下单</div>
                        <img
                            src="../../assets/images/order/finish.png"
                            class="order_step_item_icon"
                        />
                        <p class="order_step_item_time">{{detail.createTime}}</p>
                        <label :class="[detail.status <= 1 ? 'gary' : '']"></label>
                    </div>
                    <div class="order_step_item" v-if="detail.status != 5">
                        <div class="order_step_item_status" :class="[detail.status < 2 ? 'gray' : '']">已签约</div>
                        <img
                            :src="detail.status > 1 ? require('../../assets/images/order/finish.png') : require('../../assets/images/order/circle.png')"
                            class="order_step_item_icon"
                        />
                        <p class="order_step_item_time" v-if="detail.status > 1">{{detail.signTime}}</p>
                        <label :class="[detail.status <= 2 ? 'gary' : '']"></label>
                    </div>
                    <div class="order_step_item" v-if="detail.status != 5">
                        <div class="order_step_item_status" :class="[detail.status < 3 ? 'gray' : '']">已发货</div>
                        <img
                            :src="detail.status > 2 ? require('../../assets/images/order/finish.png') : require('../../assets/images/order/circle.png')"
                            class="order_step_item_icon"
                        />
                        <p class="order_step_item_time" v-if="detail.status > 2">{{detail.deliveryTime}}</p>
                        <label :class="[detail.status <= 3 ? 'gary' : '']"></label>
                    </div>
                    <div class="order_step_item" v-if="detail.status != 5">
                        <div class="order_step_item_status" :class="[detail.status < 4 ? 'gray' : '']">已完成</div>
                        <img
                            :src="detail.status > 3 ? require('../../assets/images/order/finish.png') : require('../../assets/images/order/circle.png')"
                            class="order_step_item_icon"
                        />
                        <p class="order_step_item_time" v-if="detail.status > 3">{{detail.finishTime}}</p>
                        <label :class="[detail.status <= 4 ? 'gary' : '']"></label>
                    </div>
                    <div class="order_step_item" v-if="detail.status == 5">
                        <div class="order_step_item_status">已取消</div>
                        <img
                            src="../../assets/images/order/finish.png"
                            class="order_step_item_icon"
                        />
                        <p class="order_step_item_time">{{detail.cancelTime}}</p>
                        <label></label>
                    </div>
                </div>
                <div class="order_title">订单信息</div>
                <div class="order_info">
                    <div class="order_info_orderNo">
                        订单编号
                        <label>{{detail.tradeNo}}</label>
                    </div>
                    <div class="order_info_address">
                        收货地址
                        <div class="order_info_address_detail">
                            <p>{{detail.provinceName}}{{detail.cityName}}{{detail.areaName}}{{detail.deliveryAddress}}</p>
                            <p>{{detail.deliveryUserName}} {{detail.deliveryUserPhone}}</p>
                        </div>
                    </div>
                    <div class="order_info_wuliu" v-if="detail.status == 3 || detail.status == 4">
                        <div class="order_info_wuliu_title">物流备注</div>
                        <div class="order_info_wuliu_value">顺丰快递 {{detail.logistics}}</div>
                    </div>
                    <div class="order_info_cancel" @click="cancelOrder" v-if="detail.status == 1">取消订单</div>
                    <div class="order_info_export" @click="exprotOrder" v-if="detail.status != 3 && detail.status != 4">导出清单</div>
                </div>
                <div class="order_goods">
                    <div class="order_goods_tab">
                        <div class="order_goods_tab_item">商品信息</div>
                        <div class="order_goods_tab_item">规格</div>
                        <div class="order_goods_tab_item">单价</div>
                        <div class="order_goods_tab_item">数量</div>
                        <div class="order_goods_tab_item">金额</div>
                    </div>
                    <div
                        class="order_goods_item"
                        v-for="item in detail.orders"
                        :key="item.id"
                    >
                        <div class="order_goods_item_single" style="padding-right: 20px">
                            <img
                                :src="item.itemMainPic"
                            />
                            {{item.itemName}}
                        </div>
                        <div class="order_goods_item_single">
                            <p
                                v-for="(json, key) in item.skuSpecs"
                                :key="key"
                            >
                                {{json.name}}:{{json.value}}
                            </p>
                        </div>
                        <div class="order_goods_item_single">¥{{item.itemPrice}}</div>
                        <div class="order_goods_item_single">{{item.itemCnt}}</div>
                        <div class="order_goods_item_single">¥{{item.orderAmount}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order_footer">
            <div class="container_main">
                <div>
                    商品总金额
                    <label :class="[detail.status == 1 ? 'orange' : '']">
                        ¥{{detail.itemAmount}}
                    </label>
                </div>
                <div style="margin-left:46px" v-if="detail.status != 1">
                    签约总金额
                    <label class="orange">
                        ¥{{detail.signAmount}}
                    </label>
                </div>
            </div>
        </div>
        <iframe frameborder="0" name="downExcel" style="display:none"></iframe>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    getTradeDetail,
    PostTradeCancel,
    GetTradeExport
} from '@api/api';
export default {
    data() {
        return {
            id: null,
            detail: {

            }
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        let {
            id
        } = this.$route.params;
        this.id = id;
        this.getInit();
    },
    methods: {
        getInit() {
            getTradeDetail({id: this.id})
                .then(res=>{
                    console.log(res)
                    this.detail = res.data;
                });
        },
        exprotOrder() {
            GetTradeExport({id: this.id})
                .then(res=>{
                    this.download(res.data);
                    this.$message({
                        type: 'success',
                        message: '导出成功!'
                    });
                });
        },
        download (data) {
            // let link = document.createElement('a');
            // link.style.display = 'none';
            // link.href = data;
            // let timestamp = new Date().getTime();
            // link.download = timestamp + '.xls'
            // document.body.appendChild(link)
            // link.click()
            let iframe = window.frames['downExcel'];
            iframe.location.href = data;
        },
        cancelOrder() {
            let _this = this;
            _this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                PostTradeCancel({id: _this.id})
                    .then(res=>{
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        _this.getInit();
                    });
            }).catch(() => {});
        },
    }
}
</script>
<style>
body {
    background: #fff;
}
</style>
<style scoped>
    @import './detail.css';
</style>